<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待办事项管理</title>
  <style>
    :root {
      --primary-color: #4a6fa5;
      --secondary-color: #6b8cbc;
      --success-color: #5cb85c;
      --danger-color: #d9534f;
      --light-color: #f8f9fa;
      --dark-color: #343a40;
      --border-radius: 8px;
      --transition: all 0.3s ease;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    body {
      background-color: #f5f7fa;
      color: #333;
      line-height: 1.6;
      padding: 20px;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
    
    .container {
      max-width: 800px;
      width: 100%;
      margin: 0 auto;
      background-color: white;
      border-radius: var(--border-radius);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      padding: 30px;
      transition: var(--transition);
    }
    
    header {
      text-align: center;
      margin-bottom: 30px;
    }
    
    h1 {
      color: var(--primary-color);
      margin-bottom: 10px;
      font-size: 2.5rem;
    }
    
    .subtitle {
      color: #666;
      font-size: 1.1rem;
    }
    
    .input-section {
      display: flex;
      margin-bottom: 25px;
      gap: 10px;
      justify-content: center;
    }
    
    .input-section input {
      flex: 1;
      max-width: 500px;
      padding: 12px 15px;
      border: 2px solid #e1e5eb;
      border-radius: var(--border-radius);
      font-size: 1rem;
      transition: var(--transition);
    }
    
    .input-section input:focus {
      border-color: var(--primary-color);
      outline: none;
      box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
    }
    
    .btn {
      padding: 12px 20px;
      border: none;
      border-radius: var(--border-radius);
      font-size: 1rem;
      cursor: pointer;
      transition: var(--transition);
      font-weight: 600;
    }
    
    .btn-primary {
      background-color: var(--primary-color);
      color: white;
    }
    
    .btn-primary:hover {
      background-color: var(--secondary-color);
      transform: translateY(-2px);
    }
    
    .btn-success {
      background-color: var(--success-color);
      color: white;
    }
    
    .btn-danger {
      background-color: var(--danger-color);
      color: white;
    }
    
    .btn-outline {
      background-color: transparent;
      border: 2px solid var(--primary-color);
      color: var(--primary-color);
    }
    
    .btn-outline:hover {
      background-color: var(--primary-color);
      color: white;
    }
    
    .filter-buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 25px;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .filter-buttons button {
      padding: 8px 16px;
      border: 2px solid #e1e5eb;
      background-color: white;
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: var(--transition);
      font-weight: 500;
    }
    
    .filter-buttons button.active {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }
    
    .todo-list {
      list-style: none;
      margin-bottom: 25px;
    }
    
    .todo-item {
      display: flex;
      align-items: center;
      padding: 15px;
      margin-bottom: 10px;
      background-color: white;
      border-radius: var(--border-radius);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      transition: var(--transition);
      animation: fadeIn 0.3s ease;
    }
    
    .todo-item:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }
    
    .todo-item.completed {
      opacity: 0.7;
      background-color: #f8f9fa;
    }
    
    .todo-item.completed .todo-text {
      text-decoration: line-through;
      color: #888;
    }
    
    .todo-checkbox {
      margin-right: 15px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    
    .todo-text {
      flex: 1;
      font-size: 1rem;
    }
    
    .todo-actions {
      display: flex;
      gap: 10px;
    }
    
    .todo-actions button {
      padding: 6px 12px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: var(--transition);
      font-size: 0.9rem;
    }
    
    .stats {
      text-align: center;
      color: #666;
      font-size: 1rem;
      padding-top: 15px;
      border-top: 1px solid #e1e5eb;
    }
    
    .empty-state {
      text-align: center;
      padding: 40px 20px;
      color: #888;
    }
    
    .empty-state h3 {
      margin-bottom: 10px;
      font-weight: 500;
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes fadeOut {
      from {
        opacity: 1;
        transform: translateY(0);
      }
      to {
        opacity: 0;
        transform: translateY(-10px);
      }
    }
    
    .fade-out {
      animation: fadeOut 0.3s ease forwards;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
      .container {
        padding: 20px;
      }
      
      h1 {
        font-size: 2rem;
      }
      
      .input-section {
        flex-direction: column;
        align-items: center;
      }
      
      .input-section input {
        max-width: 100%;
        margin-bottom: 10px;
      }
      
      .filter-buttons {
        justify-content: center;
      }
      
      .todo-item {
        flex-direction: column;
        align-items: flex-start;
      }
      
      .todo-actions {
        margin-top: 10px;
        width: 100%;
        justify-content: flex-end;
      }
    }
    
    @media (max-width: 480px) {
      body {
        padding: 10px;
      }
      
      .container {
        padding: 15px;
      }
      
      h1 {
        font-size: 1.8rem;
      }
      
      .btn {
        padding: 10px 15px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>待办事项</h1>
      <p class="subtitle">简单高效地管理你的任务</p>
    </header>
    
    <div class="input-section">
      <input type="text" id="todoInput" placeholder="添加新的待办事项...">
      <button id="addBtn" class="btn btn-primary">+ 添加</button>
    </div>
    
    <div class="filter-buttons">
      <button id="filterAll" class="active">全部</button>
      <button id="filterActive">未完成</button>
      <button id="filterCompleted">已完成</button>
    </div>
    
    <ul id="todoList" class="todo-list">
      <!-- 待办事项将在这里动态生成 -->
    </ul>
    
    <div id="emptyState" class="empty-state" style="display: none;">
      <h3>暂无待办事项</h3>
    </div>
    
    <div id="stats" class="stats">
      <p>0 个未完成，共计 0 个任务</p>
    </div>
  </div>

  <script>
    // 待办事项类
    class TodoApp {
      constructor() {
        this.todos = this.loadFromLocalStorage();
        this.filter = 'all';
        this.init();
      }
      
      // 初始化应用
      init() {
        this.todoInput = document.getElementById('todoInput');
        this.addBtn = document.getElementById('addBtn');
        this.todoList = document.getElementById('todoList');
        this.filterAll = document.getElementById('filterAll');
        this.filterActive = document.getElementById('filterActive');
        this.filterCompleted = document.getElementById('filterCompleted');
        this.stats = document.getElementById('stats');
        this.emptyState = document.getElementById('emptyState');
        
        this.bindEvents();
        this.render();
      }
      
      // 绑定事件
      bindEvents() {
        // 添加待办事项
        this.addBtn.addEventListener('click', () => this.addTodo());
        this.todoInput.addEventListener('keypress', (e) => {
          if (e.key === 'Enter') this.addTodo();
        });
        
        // 过滤按钮
        this.filterAll.addEventListener('click', () => this.setFilter('all'));
        this.filterActive.addEventListener('click', () => this.setFilter('active'));
        this.filterCompleted.addEventListener('click', () => this.setFilter('completed'));
      }
      
      // 添加待办事项
      addTodo() {
        const text = this.todoInput.value.trim();
        if (text === '') return;
        
        const todo = {
          id: Date.now(),
          text: text,
          completed: false,
          createdAt: new Date()
        };
        
        this.todos.push(todo);
        this.todoInput.value = '';
        this.saveToLocalStorage();
        this.render();
      }
      
      // 切换待办事项状态
      toggleTodo(id) {
        this.todos = this.todos.map(todo => {
          if (todo.id === id) {
            return { ...todo, completed: !todo.completed };
          }
          return todo;
        });
        
        this.saveToLocalStorage();
        this.render();
      }
      
      // 删除待办事项
      deleteTodo(id) {
        const todoElement = document.querySelector(`[data-id="${id}"]`);
        
        if (todoElement) {
          todoElement.classList.add('fade-out');
          setTimeout(() => {
            this.todos = this.todos.filter(todo => todo.id !== id);
            this.saveToLocalStorage();
            this.render();
          }, 300);
        }
      }
      
      // 设置过滤器
      setFilter(filter) {
        this.filter = filter;
        
        // 更新活动按钮状态
        [this.filterAll, this.filterActive, this.filterCompleted].forEach(btn => {
          btn.classList.remove('active');
        });
        
        document.getElementById(`filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`).classList.add('active');
        
        this.render();
      }
      
      // 获取过滤后的待办事项
      getFilteredTodos() {
        switch (this.filter) {
          case 'active':
            return this.todos.filter(todo => !todo.completed);
          case 'completed':
            return this.todos.filter(todo => todo.completed);
          default:
            return this.todos;
        }
      }
      
      // 渲染待办事项列表
      render() {
        const filteredTodos = this.getFilteredTodos();
        
        // 显示/隐藏空状态
        if (this.todos.length === 0) {
          this.emptyState.style.display = 'block';
          this.todoList.style.display = 'none';
        } else {
          this.emptyState.style.display = 'none';
          this.todoList.style.display = 'block';
        }
        
        // 渲染待办事项
        this.todoList.innerHTML = '';
        
        filteredTodos.forEach(todo => {
          const li = document.createElement('li');
          li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
          li.setAttribute('data-id', todo.id);
          
          li.innerHTML = `
            <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''}>
            <span class="todo-text">${todo.text}</span>
            <div class="todo-actions">
              <button class="btn ${todo.completed ? 'btn-outline' : 'btn-success'} toggle-btn">
                ${todo.completed ? '标记未完成' : '标记完成'}
              </button>
              <button class="btn btn-danger delete-btn">删除</button>
            </div>
          `;
          
          // 绑定事件
          const checkbox = li.querySelector('.todo-checkbox');
          const toggleBtn = li.querySelector('.toggle-btn');
          const deleteBtn = li.querySelector('.delete-btn');
          
          checkbox.addEventListener('change', () => this.toggleTodo(todo.id));
          toggleBtn.addEventListener('click', () => this.toggleTodo(todo.id));
          deleteBtn.addEventListener('click', () => this.deleteTodo(todo.id));
          
          this.todoList.appendChild(li);
        });
        
        // 更新统计信息
        this.updateStats();
      }
      
      // 更新统计信息
      updateStats() {
        const total = this.todos.length;
        const active = this.todos.filter(todo => !todo.completed).length;
        this.stats.innerHTML = `<p>${active} 个未完成，共计 ${total} 个任务</p>`;
      }
      
      // 保存到本地存储
      saveToLocalStorage() {
        localStorage.setItem('todos', JSON.stringify(this.todos));
      }
      
      // 从本地存储加载
      loadFromLocalStorage() {
        const todos = localStorage.getItem('todos');
        return todos ? JSON.parse(todos) : [];
      }
    }
    
    // 初始化应用
    document.addEventListener('DOMContentLoaded', () => {
      new TodoApp();
    });
  </script>
</body>
</html>